<template>
  <ScenicScreen v-model="list.filter.scenicId">
    <div class="app-container">
      <div class="table-operation">
        <span>
          <el-button
            v-if="hasBtn['新增']"
            type="primary"
            icon="el-icon-circle-plus-outline"
            @click="c"
          >
            新增
          </el-button>
        </span>
        <el-pagination
          v-bind="elPaginationProps"
          :total="list.total"
          :currentPage.sync="list.filter.pageNo"
          :pageSize.sync="list.filter.pageSize"
        />
      </div>

      <el-table v-loading="list.loading" :data="list.data" v-bind="tableProp">
        <el-table-column label="景区名称" prop="scenicName" />
        <el-table-column label="文化名称" prop="name" />
        <el-table-column label="序号" align="center" prop="sort" />
        <el-table-column label="状态" align="center">
          <template slot-scope="{ row: { id, status } }">
            <KiPopSwitch
              v-bind="popSwitchProps(status)"
              @change="updateStatus({ id, status: status ^ 1 })"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="{ row: { id } }">
            <KiPopButton v-if="hasBtn['查看']" @click="r({ id })">
              查看
            </KiPopButton>
            <KiPopButton v-if="hasBtn['编辑']" @click="u({ id })">
              编辑
            </KiPopButton>
            <KiPopButton
              v-if="hasBtn['删除']" text="![#FF7575]"
              :elPopconfirmProps="{ title: '确认删除吗？' }"
              @click="d({ id })"
            >
              删除
            </KiPopButton>
          </template>
        </el-table-column>
      </el-table>

      <KiFormDialog
        :show.sync="form.show"
        :title="formTitle"
        v-model="form.data"
        :submit="submitForm"
        :readonly="form.status === 'r'"
        ref="formRef"
        :loading="form.loading"
      >
        <template #el-form>
          <el-form-item label="景区" prop="scenicId" verify>
            <KiSelect
              v-model="form.data.scenicId"
              placeholder="景区名称"
              :options="options.scenic"
              :search="searchScenic"
              :props="{ value: 'scenicId', label: 'scenicName' }"
            />
          </el-form-item>
          <el-form-item label="文化名称" prop="name" :verify="{ maxLength: 45 }">
            <el-input
              v-model="form.data.name"
              placeholder="请输入名称"
              clearable
            />
          </el-form-item>
          <el-form-item label="文化序号" prop="sort" verify>
            <Sort v-model="form.data.sort" />
          </el-form-item>
          <el-form-item label="封面上传" prop="coverPath" verify>
            <Imgpond
              :count="1"
              v-model="form.data.coverPath"
              aspectRatio="330/160"
            />
          </el-form-item>
          <el-form-item label="详情视频" prop="videoPath">
            <Filepool
              v-model="form.data.videoPath"
              :count="1"
              fileType="video"
            />
          </el-form-item>
          <el-form-item label="文化详情" prop="content" verify>
            <MiniMCE v-model="form.data.content" :disabled="form.status === 'r'"/>
          </el-form-item>
          <el-form-item label="简介" prop="intro" verify>
            <el-input
              type="textarea"
              :autosize="{ minRows: 3 }"
              placeholder="请输入内容"
              v-model="form.data.intro"
              clearable
            />
          </el-form-item>
        </template>
      </KiFormDialog>
    </div>
  </ScenicScreen>
</template>

<script>
import pageMixin from '@/utils/pageMixin'
import useAdmateAdapter from '@/utils/useAdmateAdapter'
import ScenicScreen from '@/components/ScenicScreen'

export default {
  mixins: [pageMixin],
  components: { ScenicScreen },
  setup: () =>
    useAdmateAdapter({
      urlPrefix: 'sot-admin-api/scenic/culture',
      axiosConfig: {
        d: {
          method: 'DELETE'
        }
      }
    }),
  data () {
    return {
      options: {
        scenic: []
      }
    }
  },
  methods: {
    searchScenic (scenicName) {
      return new Promise(resolve => {
        this.$POST('sot-admin-api/scenic/queryCurrentScenicList', {
          scenicName,
          status: 1
        }).then(({ data }) => {
          if (data.length > 100) {
            data.length = 100
          }
          resolve(data)
        })
      })
    }
  }
}
</script>
